import React from 'react';
import { Card, Tag, Rate } from 'antd';
import { EnvironmentOutlined } from '@ant-design/icons';
import { Destination } from '../types';

const { Meta } = Card;

interface DestinationCardProps {
  destination: Destination;
  onClick?: () => void;
}

const DestinationCard: React.FC<DestinationCardProps> = ({ destination, onClick }) => {
  return (
    <Card
      hoverable
      style={{ width: '100%', marginBottom: 16 }}
      cover={
        <img
          alt={destination.name}
          src={destination.image}
          style={{ height: 200, objectFit: 'cover' }}
        />
      }
      onClick={onClick}
    >
      <Meta
        title={
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span>{destination.name}</span>
            <span style={{ color: '#666', fontSize: 14 }}>
              <EnvironmentOutlined /> {destination.country}
            </span>
          </div>
        }
        description={
          <div>
            <p style={{ marginBottom: 8, color: '#666' }}>{destination.description}</p>
            <div style={{ marginBottom: 8 }}>
              <Rate disabled defaultValue={destination.rating} style={{ fontSize: 14 }} />
              <span style={{ marginLeft: 8, color: '#faad14' }}>{destination.rating}</span>
            </div>
            <div style={{ marginBottom: 8 }}>
              <span style={{ color: '#52c41a', fontWeight: 'bold' }}>
                {destination.priceRange}
              </span>
            </div>
            <div>
              {destination.tags.map(tag => (
                <Tag key={tag} color="blue" style={{ marginBottom: 4 }}>
                  {tag}
                </Tag>
              ))}
            </div>
          </div>
        }
      />
    </Card>
  );
};

export default DestinationCard;
